<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo 资源收藏整理</title>
    <link rel="stylesheet" href="static/css/init.css">
    <link rel="stylesheet" href="static/css/index.css">
    <script src="../blogs/private/util.js"></script>
    <script src="util.js"></script>
</head>

<body>
    <header>
        <div class="h_content">
            <div class="bg"></div>
            <img src="https://avatars3.githubusercontent.com/u/8067515?v=3&s=460" alt="" class="circle avatar" />
            <div class="txt">
                <a>
                    <h1>yangjl</h1>
                </a>
                <p>前端开发者<br/>喜欢代码，相信努力的人会更幸运。</p>
            </div>
        </div>
        <nav class="nav">
            <ul>
                <li><a href="https://github.com/lanria990" target="_blank">Github</a></li>
                <li><a href="http://jsfiddle.net/user/yangjl/fiddles/" target="_blank">JSFIDDLE</a></li>
            </ul>
        </nav>
    </header>
    <ul class="grid" id="grid_content">

    </ul>
    <script>
        window.onload = () => {
            const db = {
                "items": [
                     {
                        "path": "static/images/demos/vue-elem.gif",
                        "git_path": "http://git.oschina.net/tanyang/vue-elment-setting",
                        "title": "Vue eleme render 配置",
                        "desc": "Vue eleme render配置案例",
                        "categories": [
                            "item",
                            "javaScript"
                        ]
                    },
                    {
                        "path": "static/images/demos/vue-news.gif",
                        "git_path": "http://git.oschina.net/tanyang/vue-plato-news",
                        "title": "Vue plato news",
                        "desc": "Vue 简单的新闻案例,包含单元测试，eslint+webpack+es6+vuex",
                        "categories": [
                            "item",
                            "javaScript"
                        ]
                    },
                    {
                        "path": "static/images/demos/ng-setting.gif",
                        "git_path": "http://git.oschina.net/tanyang/ng1-setting",
                        "title": "ng1-setting",
                        "desc": "ng1 指令配置列表",
                        "categories": [
                            "item",
                            "javaScript"
                        ]
                    },
                    {
                        "path": "static/images/demos/svg-aimate.gif",
                        "git_path": "https://jsfiddle.net/yangjl/2wyvsmrb/",
                        "title": "SVG 动画",
                        "desc": "SVG 动画",
                        "categories": [
                            "item",
                            "css3"
                        ]
                    },
                    {
                        "path": "static/images/demos/2.gif",
                        "git_path": "src/3dimage.html",
                        "title": "CSS3 翻转动画",
                        "desc": "CSS3 翻转动画",
                        "categories": [
                            "item",
                            "css3"
                        ]
                    },
                    {
                        "path": "static/images/demos/z-index.png",
                        "git_path": "src/z-index.html",
                        "title": "立方体旋转",
                        "desc": "CSS3 动画-立方体旋转",
                        "categories": [
                            "item",
                            "css3"
                        ]
                    },
                    {
                        "path": "static/images/demos/cicada-principle-border-radius.gif",
                        "git_path": "src/cicada-principle-border-radius.html",
                        "title": "蝉原则CSS3随机多背景随机圆角效果",
                        "desc": "CSS3 动画-蝉原则CSS3随机多背景随机圆角效果",
                        "categories": [
                            "item",
                            "css3"
                        ]
                    },
                    {
                        "path": "static/images/demos/infinite-scroll.gif",
                        "git_path": "src/infinite-scroll.html",
                        "title": "无限滚动",
                        "desc": "IntersectionObserver 无限滚动",
                        "categories": [
                            "item",
                            "javaScript"
                        ]
                    },
                    {
                        "path": "static/images/demos/default.png",
                        "git_path": "util.js",
                        "title": "js代码片断收集",
                        "desc": "有意思的代码片断收集",
                        "categories": [
                            "item",
                            "javaScript"
                        ]
                    },
                    {
                        "path": "static/images/demos/default.png",
                        "git_path": "src/collection.html",
                        "title": "个人收藏夹",
                        "desc": "常看的博客，常用的API...",
                        "categories": [
                            "item",
                            "javaScript"
                        ]
                    },
                    {
                        "path": "static/images/demos/blog.png",
                        "git_path": "https://lanria990.github.io/#blog",
                        "title": "个人站",
                        "desc": "使用jekky搭建的小博客，记录平常阅读的文章",
                        "categories": [
                            "item",
                            "javaScript"
                        ]
                    }
                ]
            }
            const grid_content = document.getElementById('grid_content')
            const childrens = db.items.map(item => {
                return `<li class="grid-1">
                    <div class="${item.categories.join(' ')}">
                        <a href="${item.git_path}" target="_blank">
                            <img src="${item.path}">
                            <h2>${item.title} </h2>
                            <h3></h3>
                            <p>${item.desc}</p>
                        </a>
                    </div>
                </li>`
            }).join('')
            grid_content.innerHTML = childrens


        }
    </script>

</body>

</html>